<script setup>
import HeatResult from "@/views/Heat/cpns/HeatResult.vue";
import SettingTable from "@/components/SettingTable.vue";
import Footer from "@/components/Footer.vue";
import {ref} from "vue";
import useDiscoverStore from "@/stores/modules/useHeap";
import {storeToRefs} from "pinia";

const discoverStore=useDiscoverStore()
discoverStore.fetchHeatMap()
const {heatMap}=storeToRefs(discoverStore)
const params=ref([
  {
    label: "温度权重",
    value: ""
  },
  {
    label: "洋流权重",
    value: ""
  },
  {
    label: "盐度权重",
    value: ""
  },
  {
    label: "降水权重",
    value: ""
  },
  {
    label: "其他权重",
    value: ""
  },
])
</script>

<template>
  <div class="heat-content">
    <div class="heat-left">
      <HeatResult :heatMap="heatMap"></HeatResult>
      <div class="heat-left2" id="heat-left2"></div>
    </div>
    <div class="heat-right">
      <SettingTable :params="params"></SettingTable>
      <div class="heat-right2"></div>
    </div>
  </div>
  <Footer></Footer>
</template>

<style scoped>
.heat-content {
  //width:100%;
  height: 100%;
  padding-top: 10px;
  margin-top: 10px;
  display: flex;
  background-color: #ffffff;
}

.heat-left {
  width: 66.66%;
  height: 60%;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
}

.heat-left > div {
  width: 100%;
  height: 100%;
  flex-grow: 1;
}

.heat-right {
  width: 33.33%; /*有实际表注释掉，发挥左:右=2:1*/
  padding: 0;
  margin: 0;
  //height:800px;
}

.heat-right > div {
}

@media screen and (max-width: 2000px) {
  .heat-content {
    height:200px;/*800*/
  }

  .heat-left {
    height: 800px;/*800*/
    /*padding:0px;
    margin:0px;加注释*/
    flex-grow: 2;
    /*border:1px solid yellow;*/
    display: flex;
    flex-direction: column;
  }
  .footer{
    top:600px;
  }
}
</style>
<!--2024/2/7 21:00-->